[data-component="card"]{
  position: relative;
  // background-color: #F09DC1;
  background: url('https://www.falcom.co.jp/page/wp-content/themes/falcom/assets/toppage/title_lineup/kuro_201217.jpg') center center ;
  background-size: 100% 100%;
  margin: 15px 10px;
  cursor: pointer;
  color: whitesmoke;
  height: 200px;
  transition: all .3s ease-in;
  overflow: hidden;
  &:hover{
    // background-color: rgba($color: hsl(334, 73%, 78%), $alpha: .72);
    background-size: 120% 120%;
    .c-intro{
      height: 120px;
      background: transparent;
    }
    &::after{
      opacity: 1;
      backdrop-filter: blur(8px);
    }
  }
  &::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .3s;
  }
  .c-intro{
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: linear-gradient(to bottom, rgba(0, 0, 0,  0%), rgba(0, 0, 0, 80%));
    color: rgb(245, 245, 245);
    transition: height .3s;
    .c-title{
      height: 50px;
      line-height: 50px;
      text-indent: 32px;
      font-weight: 700;
    }
    .c-hide{
      height: 50px;
      width: 100%;
      text-indent: 32px;
    }
    .c-tag{
      text-indent: 0;
      display: inline-block;
      padding: 0 10px;
      margin-right: 10px;
      border: 1px solid rgb(245, 245, 245);
      border-radius: 20px;
      font-size: 0.75rem;
    }
    .c-type, .create-time{
      font-size: 14px;
      display: inline-block;
      text-indent:  0;
      margin-right: 10px;
    }
  }
}
